<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>日志系统测试页面</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      background: #f5f5f5;
    }
    .container {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    h1 {
      color: #333;
      border-bottom: 2px solid #4CAF50;
      padding-bottom: 10px;
    }
    .section {
      margin: 20px 0;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    .section h3 {
      margin-top: 0;
      color: #666;
    }
    button {
      background: #4CAF50;
      color: white;
      border: none;
      padding: 10px 20px;
      margin: 5px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }
    button:hover {
      background: #45a049;
    }
    button.secondary {
      background: #2196F3;
    }
    button.secondary:hover {
      background: #0b7dda;
    }
    button.danger {
      background: #f44336;
    }
    button.danger:hover {
      background: #da190b;
    }
    .info {
      background: #e3f2fd;
      padding: 10px;
      border-radius: 4px;
      margin: 10px 0;
    }
    code {
      background: #f5f5f5;
      padding: 2px 6px;
      border-radius: 3px;
      font-family: 'Courier New', monospace;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎯 日志系统测试页面</h1>
    
    <div class="info">
      <strong>提示：</strong> 打开浏览器控制台（F12）查看日志输出效果
    </div>

    <div class="section">
      <h3>1. 基础日志测试</h3>
      <button onclick="testBasicLogs()">测试所有日志等级</button>
      <button onclick="testWithData()">测试带数据的日志</button>
      <button onclick="testError()">测试错误日志</button>
    </div>

    <div class="section">
      <h3>2. 日志等级控制</h3>
      <button onclick="setLevel('trace')">设置为 TRACE</button>
      <button onclick="setLevel('debug')">设置为 DEBUG</button>
      <button onclick="setLevel('info')">设置为 INFO</button>
      <button onclick="setLevel('warn')">设置为 WARN</button>
      <button onclick="setLevel('error')">设置为 ERROR</button>
      <button class="danger" onclick="setLevel('silent')">静默模式</button>
    </div>

    <div class="section">
      <h3>3. 持久化日志测试</h3>
      <button class="secondary" onclick="getLogs()">获取持久化日志</button>
      <button class="secondary" onclick="getLogsFiltered()">获取错误日志</button>
      <button class="danger" onclick="clearLogs()">清除所有日志</button>
    </div>

    <div class="section">
      <h3>4. 性能测试</h3>
      <button onclick="performanceTest()">批量日志测试 (1000条)</button>
      <button onclick="stressTest()">压力测试 (10000条)</button>
    </div>

    <div class="section">
      <h3>5. 场景模拟</h3>
      <button class="secondary" onclick="simulateUserAction()">模拟用户操作</button>
      <button class="secondary" onclick="simulateApiCall()">模拟API调用</button>
      <button class="secondary" onclick="simulateError()">模拟错误场景</button>
    </div>
  </div>

  <script type="module">
    // 导入日志系统（注意：这个路径需要根据实际情况调整）
    import { createLogger, LOG_LEVELS, getLogs as getLogsFromStorage, clearLogs as clearLogsFromStorage } from '../src/utils/logger.js'

    // 创建测试用的日志记录器
    window.testLogger = createLogger('test', {
      level: LOG_LEVELS.DEBUG,
      enablePersist: true,  // 启用持久化以便测试
      enableCollect: false
    })

    // 暴露到全局以便按钮调用
    window.logger = window.testLogger
    window.LOG_LEVELS = LOG_LEVELS
    window.getLogsFromStorage = getLogsFromStorage
    window.clearLogsFromStorage = clearLogsFromStorage

    console.log('%c✅ 日志系统已加载', 'color: green; font-weight: bold; font-size: 14px')
    window.logger.info('测试页面已准备就绪')
  </script>

  <script>
    // 基础日志测试
    function testBasicLogs() {
      logger.trace('这是 TRACE 级别日志 - 最详细的调试信息')
      logger.debug('这是 DEBUG 级别日志 - 开发调试信息')
      logger.info('这是 INFO 级别日志 - 一般信息')
      logger.warn('这是 WARN 级别日志 - 警告信息')
      logger.error('这是 ERROR 级别日志 - 错误信息')
      console.log('%c✅ 所有等级日志已输出，请查看控制台', 'color: green')
    }

    // 测试带数据的日志
    function testWithData() {
      logger.info('用户登录', {
        userId: 12345,
        username: 'testuser',
        timestamp: Date.now()
      })
      
      logger.debug('API 请求', {
        method: 'POST',
        url: '/api/users',
        params: { page: 1, limit: 10 }
      })

      logger.warn('性能警告', {
        operation: 'database query',
        duration: 3500,
        threshold: 3000
      })

      console.log('%c✅ 带数据的日志已输出', 'color: green')
    }

    // 测试错误日志
    function testError() {
      try {
        throw new Error('这是一个测试错误')
      } catch (error) {
        logger.error('捕获到错误', {
          message: error.message,
          stack: error.stack
        })
      }

      logger.error('操作失败', {
        operation: 'save data',
        reason: 'network timeout',
        retryCount: 3
      })

      console.log('%c✅ 错误日志已输出', 'color: green')
    }

    // 设置日志等级
    function setLevel(level) {
      logger.setLogLevel(LOG_LEVELS[level.toUpperCase()])
      console.log(`%c✅ 日志等级已设置为: ${level.toUpperCase()}`, 'color: green')
      logger.info(`当前日志等级: ${level.toUpperCase()}`)
      logger.debug('这是 DEBUG 日志（如果看不到说明等级设置成功）')
    }

    // 获取持久化日志
    async function getLogs() {
      const logs = await getLogsFromStorage()
      console.group('📋 持久化日志 (' + logs.length + ' 条)')
      console.table(logs)
      console.groupEnd()
      logger.info(`已获取 ${logs.length} 条持久化日志`)
    }

    // 获取过滤后的日志
    async function getLogsFiltered() {
      const logs = await getLogsFromStorage({
        level: 'error',
        limit: 50
      })
      console.group('❌ 错误日志 (' + logs.length + ' 条)')
      console.table(logs)
      console.groupEnd()
      logger.info(`已获取 ${logs.length} 条错误日志`)
    }

    // 清除日志
    async function clearLogs() {
      if (confirm('确定要清除所有持久化日志吗？')) {
        const result = await clearLogsFromStorage()
        if (result) {
          console.log('%c✅ 所有日志已清除', 'color: green')
          logger.info('日志已清除')
        }
      }
    }

    // 性能测试
    function performanceTest() {
      console.time('批量日志测试')
      logger.info('开始批量日志测试 (1000条)')
      
      for (let i = 0; i < 1000; i++) {
        if (i % 100 === 0) {
          logger.info(`进度: ${i}/1000`)
        }
      }
      
      console.timeEnd('批量日志测试')
      logger.info('批量日志测试完成')
    }

    // 压力测试
    function stressTest() {
      console.time('压力测试')
      logger.info('开始压力测试 (10000条)')
      
      const levels = ['trace', 'debug', 'info', 'warn', 'error']
      for (let i = 0; i < 10000; i++) {
        const level = levels[i % levels.length]
        logger[level](`压力测试日志 ${i}`, { index: i })
      }
      
      console.timeEnd('压力测试')
      logger.info('压力测试完成')
    }

    // 模拟用户操作
    function simulateUserAction() {
      logger.info('用户操作开始', { action: 'click_button' })
      
      setTimeout(() => {
        logger.debug('验证用户权限', { userId: 123, role: 'admin' })
      }, 100)

      setTimeout(() => {
        logger.debug('执行业务逻辑', { operation: 'save_data' })
      }, 200)

      setTimeout(() => {
        logger.info('用户操作完成', { action: 'click_button', duration: 300 })
      }, 300)

      console.log('%c✅ 用户操作模拟中，请查看控制台', 'color: green')
    }

    // 模拟API调用
    function simulateApiCall() {
      const requestId = Math.random().toString(36).substr(2, 9)
      
      logger.info('API 请求开始', {
        requestId,
        method: 'POST',
        url: '/api/users'
      })

      setTimeout(() => {
        logger.debug('发送请求数据', {
          requestId,
          data: { name: 'Test User', email: 'test@example.com' }
        })
      }, 100)

      setTimeout(() => {
        logger.debug('收到响应', {
          requestId,
          status: 200,
          duration: 250
        })
      }, 250)

      setTimeout(() => {
        logger.info('API 请求完成', {
          requestId,
          success: true,
          totalDuration: 300
        })
      }, 300)

      console.log('%c✅ API调用模拟中，请查看控制台', 'color: green')
    }

    // 模拟错误场景
    function simulateError() {
      logger.info('开始执行复杂操作')

      setTimeout(() => {
        logger.debug('步骤 1: 初始化')
      }, 100)

      setTimeout(() => {
        logger.debug('步骤 2: 验证数据')
      }, 200)

      setTimeout(() => {
        logger.warn('步骤 3: 检测到异常', {
          warning: 'data format might be incorrect'
        })
      }, 300)

      setTimeout(() => {
        logger.error('操作失败', {
          error: 'Validation failed',
          field: 'email',
          value: 'invalid-email'
        })
      }, 400)

      setTimeout(() => {
        logger.info('操作已回滚')
      }, 500)

      console.log('%c✅ 错误场景模拟中，请查看控制台', 'color: green')
    }
  </script>
</body>
</html>

